<template>
  <div style="background: #c5c4c4;padding: 20px;">
    <el-form label-position="top">
      <el-button icon="el-icon-plus" type="primary" @click="handleAddSukForm">添加规格名</el-button>
      <el-form-item v-for="(items, index) in form" :key="index" label="规格名">
        <el-input v-model="items.sukName" maxlength="10" placeholder="请输入规格名" style="width: 180px" type="text" />
        <el-button icon="el-icon-plus" style="margin-left: 10px" type="primary" @click="handleAdd(items)">添加规格值
        </el-button>
        <div style="display: flex;flex-wrap: wrap;">
          <el-form-item v-for="(item,ks) in items.children" :key="ks" style="margin-top: 10px;">
            <div style="margin-right: 10px">
              <el-input
                v-model="item.specificationsValue"
                maxlength="10"
                placeholder="请输入规格值"
                style="width: 180px;"
                type="text"
              />
              <el-button circle icon="el-icon-delete" type="danger" @click="handleDeleted(items,ks)" />
            </div>
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <el-table :data="form" border>
      <el-table-column label="规格名称" prop="sukName" />
      <el-table-column label="规格值">
        <template v-slot="scope" style="padding: 0;">
          <div
            v-for="item in scope.row.children"
            :key="item.id"
            style="border-bottom: 1px solid #dfe6ec;height: 30px;line-height: 30px;"
          >
            {{ item.specificationsValue }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="price">
        <template v-slot="scope" style="padding: 0;">
          <div
            v-for="item in scope.row.children"
            :key="item.id"
            style="height: 30px;line-height: 30px;"
          >
            <el-input v-model="item.price" placeholder="请输入价格" type="text" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="库存" prop="inventory">
        <template v-slot="scope" style="padding: 0;">
          <div
            v-for="item in scope.row.children"
            :key="item.id"
            style="height: 30px;line-height: 30px;"
          >
            <el-input v-model="item.inventory" placeholder="请输入库存数量" type="text" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: [
        {
          id: 3,
          sukName: '颜色',
          children: [
            {
              id: 0,
              specificationsValue: '黑色'
            },
            {
              id: 1,
              specificationsValue: '白色色'
            },
            {
              id: 2,
              specificationsValue: '橙色'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        console.log(222)
        const rowspan = row.children ? row.children.length : 1
        console.log(rowspan, 'rowspan')
        return { rowspan, colspan: 1 }
      }
    },
    handleAddSukForm() {
      this.form.push({
        sukName: '',
        children: []
      })
    },

    handleAdd(data) {
      data.children.push({ money: '', specificationsValue: '', id: data.children.length + 1 })
    },
    handleDeleted(data, index) {
      data.children.splice(index, 1)
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
      }, 1000)
    }
  }
}
</script>
